import * as React from 'react'
import { Alert, Table } from 'antd'

export interface Props {
  columns: any //表列
  selectedRows?: Array<any> //选中的行
  onSelectRow?: (row: any) => void  //选中事件
  onChange: (pagination: any, filters: any, sorter: any) => void    //表单条件改变事件
  data: any //table内容
  loading: boolean //表格是否加载中
  rowKey?: string   //表格key列
  select: boolean   //是否开启选择模式
  xscroll?:string//table横向滚动条宽度
}

function initTotalList(columns: Array<any>): Array<any> {
  const totalList: Array<any> = []
  columns.forEach(column => {
    if (column.needTotal) {
      totalList.push({ ...column, total: 0 });
    }
  })
  return totalList
}
export default class StandardTable extends React.Component<Props, any> {
  constructor(props: Props) {
    super(props);
    const { columns } = props
    const needTotalList = initTotalList(columns)
    this.state = {
      selectedRowKeys: [],
      selectRows: [],
      needTotalList,
    };
  }

  // componentWillReceiveProps (nextProps: Props) {
  //   const { selectedRows } = nextProps
  //   const { selectRows } = this.state
  //   let selectedRowKeys: any [] = []
  //   if(JSON.stringify(selectedRows)!==JSON.stringify(selectRows)){
  //     if(selectedRows){
  //       selectRows.map((row: any) => {
  //         selectedRowKeys = [...selectedRowKeys, row.id]
  //       })
  //     }
  //     this.setState({
  //       selectRows: selectedRows,
  //       selectedRowKeys,
  //     })
  //   }
  // }

  handleRowSelectChange = (selectedRowKeys: any, selectedRows: any) => {
    const { needTotalList: list } = this.state
    const { onSelectRow } = this.props
    let needTotalList = [...list]
    needTotalList = needTotalList.map(item => {
      return {
        ...item,
        total: selectedRows.reduce((sum: number, val: any) => {
          return sum + parseFloat(val[item.dataIndex])
        }, 0),
      }
    })
    if (onSelectRow) {
      onSelectRow(selectedRows)
    }
    this.setState({ selectedRowKeys, needTotalList });
  }

  handleTableChange = (pagination: any, filters: any, sorter: any) => {
    const { onChange } = this.props
    onChange(pagination, filters, sorter)
  }
  cleanSelectedKeys = () => {
    this.handleRowSelectChange([], [])
  }
  render () {
    const { selectedRowKeys, needTotalList } = this.state
    const { select } = this.props
    const {
      data: { list, pagination },
      loading,
      columns,
      rowKey,
      xscroll,
    } = this.props
    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      ...pagination,
    }
    const rowSelection =select?{
      selectedRowKeys,
      onChange: this.handleRowSelectChange,
      getCheckboxProps: (record: any) => ({
        disabled: record.disabled,
      }),
    }: undefined
    return (
      <div className="=standardTable">
        {select&&<div className="tableAlert">
          <Alert
            message={
              <React.Fragment>
                已选择 <a style={{ fontWeight: 600 }}>{selectedRowKeys.length}</a> 项&nbsp;&nbsp;
                {needTotalList.map((item: any) => (
                <span style={{ marginLeft: 8 }} key={item.dataIndex}>
                    {item.title}
                    总计&nbsp;
                    <span style={{ fontWeight: 600 }}>
                    {item.render ? item.render(item.total) : item.total}
                    </span>
                </span>
                ))}
                <a onClick={this.cleanSelectedKeys} style={{ marginLeft: 24 }}>
                清空
                </a>
              </React.Fragment>
            }
            type="info"
            showIcon
          />
        </div>}
        <Table
          scroll={{x:xscroll||"100%"}}
          loading={loading}
          rowKey={rowKey || 'key'}
          rowSelection={rowSelection}
          dataSource={list}
          columns={columns}
          pagination={paginationProps}
          onChange={this.handleTableChange}
        />
      </div>
    );
  }
}